<template>
  <n-form
      ref="formRef"
      :label-width="props.labelWidth"
      label-placement="left"
      :model="props.formValue"
  >
    <n-grid x-gap="12" :cols="4">
      <n-gi v-for="(item,index) in formList">
        <slot v-if="item.slot" :name="item.slot" :formitem="item"></slot>
        <n-form-item v-else-if="item.type==='input'" :path="item.path || item.key"
                     :label="item.label + '：'" :rule="item.rules||[]">
          <n-input v-model:value="props.formValue[item.key]" @keydown.enter.prevent
                   type="text"
                   :placeholder="item.placeholder || '请输入'" clearable
                   :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled">
          </n-input>
        </n-form-item>
        <n-form-item v-else-if="item.type==='select'" :path="item.path || item.key" :label="item.label + '：'"
                     :rule="item.rules||[]">
          <n-select v-model:value="props.formValue[item.key]" @keydown.enter.prevent
                    :placeholder="item.placeholder || '请选择'"
                    clearable :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled"
                    :options="item.options || props.dictoptions[item.key] || []"></n-select>
        </n-form-item>
        <n-form-item v-else-if="item.type==='picker'" :path="item.path || item.key" :label="item.label + '：'"
                     :type="item.datetype || 'date'" :rule="item.rules||[]">
          <n-date-picker v-model:value="props.formValue[item.key]" :type="item.datetype || 'date'" clearable
                         :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled"/>
        </n-form-item>
        <n-form-item v-else-if="item.type==='treeselect'" :path="item.path || item.key" :label="item.label + '：'"
                     :rule="item.rules||[]">
          <n-tree-select :options="item.options || props.dictoptions[item.key] || []"
                         v-model:value="props.formValue[item.key]" :placeholder="item.placeholder || '请选择'"
                         :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled"/>
        </n-form-item>
      </n-gi>
    </n-grid>
  </n-form>
</template>

<script setup name="searchForm" lang="ts">
import {ref,defineProps,defineExpose} from "vue"
const formRef= ref<any>(null)
const props = defineProps({
  formList: {
    type: Array,
  },
  formValue: {
    type: Object,
    default(data:any){
      return data || {}
    },
  },
  labelWidth:{
    type:Number,
    default:100,
  },
})

// 校验
const jiaoyan = (formFunc:Function) => {
  console.log("触发1")
  const jieguo = formRef.value.validate((errors:any) => {
    console.log("触发2")
    if (!errors) {
      formFunc(props.formValue)
    }
  })
  return jieguo
}

defineExpose({jiaoyan})
</script>

<style scoped>

</style>